<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .two {
            display: none;
        }
    </style>
</head>

<body>
    <select class="province">
        <option value="">请选择省份</option>
        <!-- <option value="A001">北京</option>
        <option value="A002">上海</option>
        <option value="A003">湖北</option>
        <option value="A004">湖南</option> -->
    </select>
    <select class="city" name="" id="">
        <option value="">请选择市/区</option>
        <!-- <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option> -->
    </select>
    <select class="countyTown" name="" id="">
        <option value="">请选县/区</option>
        <!-- <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option> -->
    </select>
</body>
<script>
    var province = document.getElementsByClassName("province")[0];
    var city = document.getElementsByClassName("city")[0];
    var countyTown = document.getElementsByClassName("countyTown")[0];
    // var Tow = document.getElementsByClassName("Tow")[0];

    var xhr = new XMLHttpRequest();
    xhr.open("get", "../data/proData.json", true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var text = xhr.responseText;
            var obj = JSON.parse(text);
            var { list: proList } = obj; //解构
            console.log(proList);
            var html = `<option value="">请选择省份</option>`;
            citySwitch(proList, province, html);

            //省份改变，选择市
            province.onchange = function () {

                var proId = province.value;
                if (proId) {
                    var thisPro = proList.find(({ city_id }) => {
                        return city_id == proId;
                    });

                    var { list: cityList } = thisPro; //解构
                    console.log(cityList);
                    var html = `<option value="">请选择市/区</option>`;
                    countyTown.innerHTML = `<option value="">请选县/区</option>`;
                    citySwitch(cityList, city, html);

                } else {
                    city.innerHTML = `<option value="">请选择市/区</option>`;
                    countyTown.innerHTML = `<option value="">请选县/区</option>`;
                }

                // 市改变，选择县
                city.onchange = function () {

                    var cityId = city.value;
                    if (cityId) {


                        var thisCity = cityList.find(({ city_id }) => {
                            return city_id == cityId;
                        });

                        var { list: countyTownList } = thisCity; //解构
                        // console.log(countyTownList);

                        if (countyTownList) { //如果有县才会显示
                            countyTown.classList.remove("two"); //不是直辖市自治区就删除class名，显示县级
                            var html = `<option value="">请选县/区</option>`;
                            citySwitch(countyTownList, countyTown, html);
                        } else {
                            countyTown.innerHTML = `<option value="">请选县/区</option>`;
                            countyTown.classList.add("two"); //不是直辖市自治区就增加class名，去除县级
                        }

                    } else {
                        countyTown.innerHTML = `<option value="">请选县/区</option>`;
                    }
                }

            }



        }
    }

    //遍历数组解构里面的id和name,然后写到页面
    // arr:传入的数组  city: 下拉框的名字  html:html默认结构
    function citySwitch(arr, city, html) {
        arr.forEach(({ city_id, name }) => {
            html += `<option value="${city_id}">${name}</option>`;
        });
        city.innerHTML = html;
    }

</script>

</html>